<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>注册界面</title>

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/register/styles.css">
    <script src="${pageContext.request.contextPath}/js/register.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <script type="text/javascript">
        var RegisterServlet = "${pageContext.request.contextPath}/RegisterServlet?"
    </script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/webjars/jquery/3.4.1/dist/jquery.min.js"></script>


</head>

<body>
<!-- 头 -->
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/index.jsp">
            <img src="${pageContext.request.contextPath}/images/index/logo.png" alt="#" style="width: 10vw;">
        </a>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">酒店预订</a>
                <a class="nav-item nav-link" href="#">积分商城</a>
                <a class="nav-item nav-link" href="#">关于首旅如家</a>
            </div>

        </div>
    </nav>
</div>
<hr color="#b0b0b0">
<!-- 中间注册表单 -->
<div class="registerbox">
    <div class="register">
        <form action="${pageContext.request.contextPath}/RegisterServlet?action=reg" id="registerForm" method="post"
              onsubmit="return loginCheck()">
            <div class="form-group">
                <label for="user">用户名:</label>
                <input type="text" class="form-control inputstyle" name="username" id="user"
                       placeholder="请输入1到20位中英文或者数字"
                       onfocusout="userCheck(this)" onchange="checkUserRepeat(this.value)">
                <div class="Error"><span id="userSpan" class="tips"></span></div>

            </div>

            <div class="form-group">
                <label for="user">手机号:</label>
                <input type="text" class="form-control inputstyle" name="phoneNo" id="phoneNo" placeholder="可以作为登录账号使用"
                       onfocusout="phoneNumberCheck(this)" onchange="checkPhoneRepeat(this.value)">
                <div class="Error"><span id="phoneNumberSpan" class="tips"></span></div>
            </div>

            <div class="form-group">
                <label for="pwd">登录密码:</label>
                <input type="password" class="form-control inputstyle" name="pwd" id="pwd"
                       placeholder="6-20位字母、数字、符号，不能含有空格"
                       onfocusout="pwdCheck(this)" onkeyup="pwdStrCheck()">
                <div class="Error"><span id="pwdSpan" class="tips"></span></div>
            </div>
            <div style="margin-left: 125px;">
                <table>
                    <tbody>
                    <tr>
                        <td>
                            <span id="str_L"
                                  style="height: 11px; text-align: center; margin-top: 10px; width: 98px; float: left; background: #d4d4d4; border-radius: 5px 0px 0px 5px;"></span>
                            <span id="str_M"
                                  style="height:11px; text-align: center;margin:10px 0 0 1px; width: 98px;  float: left;  background: #d4d4d4;"></span>
                            <span id="str_B"
                                  style="height:11px; text-align: center;margin:10px 0 0 1px; width: 98px; float: left; background: #d4d4d4;border-radius:0 5px 5px 0"></span>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 16px; color:#979797;">
                            <span style="margin-left: 45px; ;margin-right: 30px;">弱</span>
                            <span style="margin-left: 45px; ;margin-right: 30px;">中</span>
                            <span style="margin-left: 45px; ">强</span>
                        </td>

                    </tr>
                    </tbody>
                </table>


            </div>
            <div class="form-group">
                <label for="pwd">确认密码:</label>
                <input type="password" class="form-control inputstyle" id="repwd" placeholder="请再次输入密码"
                       onfocusout="repwdCheck(this)">
                <div class="Error"><span id="repwdSpan" class="tips"></span></div>
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input type="text" class="form-control inputstyle" name="Email" id="Email" placeholder="可用于接收订单信息确认"
                       onfocusout="emailCheck(this)" onchange="checkEmailRepeat(this.value)">
                <div class="Error"><span id="emailSpan" class="tips"></span></div>
            </div>
            <div style="margin-left: 125px; margin-top: 20px; font-size: 14px">
                <input type="checkbox" id="agree" checked="true" onclick="agreeCheck(this)">
                <span>同意<a href="#">《花里胡哨协议》</a></span>
                <span id="agreeSpan" class="tips"></span>
            </div>
            <div style="margin-left: 116px;">
                <button class="registerbutton" id="loginBtn" onclick="loginCheck()">注册</button>
            </div>
        </form>
    </div>

    <div class="other">
        <p style="padding-left: 11px; font-weight: bolder;"> 已是会员</p>
        <a href="login.jsp">
            <button class="btn btn-warning">直接登录</button>
        </a>

    </div>
</div>
<div class="container-fluid footer">
    © 2021 Homeinns Co.,Ltd All Rights Reserved.酒店管理（上海）有限公司
</div>
</body>

</html>